<script setup lang="ts">
  import { PropType } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'
  import { useCustomerReceiptConfirm } from '@/services/pages/return-factory/useReturnFactory'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { confirmLoading, confirm } = useCustomerReceiptConfirm()

  const props = defineProps({
    goodList: {
      type: Array as PropType<Array<ReturnFactoryDetailGood>>,
      required: true,
    },
    returnFactoryId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 抽屉显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 隐藏抽屉
  const hideDrawer = () => {
    visible.value = false
  }

  /**
   * 确定签收事件
   */
  const onConfirm = async () => {
    const res = await confirm(
      props.returnFactoryId,
      props.goodList.map((item) => item.id),
    )
    if (res.code === 20000) {
      HMessage.success('确定签收成功')
      emits('update')
      hideDrawer()
      return
    }
    HMessageBox.error(res.message)
  }
</script>

<template>
  <h-drawer v-model="visible" title="代客户签收" :width="1000" unit="px" :loading="confirmLoading">
    <el-table :data="props.goodList" :border="true" stripe>
      <!-- 序号 -->
      <el-table-column
        width="50"
        label="序号"
        fixed="left"
        :align="'center'"
        type="index"
      ></el-table-column>

      <!-- 条码 -->
      <el-table-column width="160" label="条码" prop="code" show-overflow-tooltip></el-table-column>

      <!-- 产品信息 -->
      <el-table-column width="360" label="产品信息" prop="goodsModel" show-overflow-tooltip>
        <template #default="{ row }">
          {{ `${row.goodsName}、${row.goodsModel}、${row.goodsSpec}、${row.goodsCode}` }}
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定签收</h-button>
      <h-button is-modal @click="hideDrawer">取消</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss"></style>
